React hooks 的使用原则

1. 仅在函数组件中使用：Hooks 只能在函数组件中使用，不能在类组件中使用。
2. 只在顶层调用 Hooks：不要在循环、条件语句或嵌套函数中调用 Hooks。确保在函数组件的最顶层使用 Hook。这有助于确保每次渲染时，Hook 的调用顺序保持不变。
3. 按照功能划分 Hook：尽量将不同的功能封装成独立的 Hook，这样可以使代码更模块化、可复用，并且易于维护。
4. 使用命名约定：以 "use" 开头命名自定义 Hook。
5. 遵循 Hook 的规则：遵循 Hook 的命名规则和使用规则，比如确保在自定义 Hook 内部只调用其他 Hook，不要在条件语句中使用 Hook。
6. 避免在循环中创建 Hook：不要在循环、条件语句或嵌套函数中调用 Hook。Hook 应该在每次渲染时按照相同的顺序被调用，以确保 React 能够正确地跟踪每个 Hook 的状态。

React.createElement()

import React from 'react';
import ReactDOM from 'react-dom';

/**
 * React.createElement()
 * 参数1： 标签名
 * 参数2： 标签属性
 * 参数3： 标签内容
 * 参数4： 其他节点
 */
const myH1 = <div title='h1'>哈哈哈</div>;

const myDiv = React.createElement(
  'div',
  { title: 'this is a div', id: 'mydiv' },
  '这是一个div',
  myH1
);

// 将 myH1 放在 myDiv中，渲染到 #app 标签中
ReactDOM.render(myDiv, document.getElementById('app'));

React 组件

• 组件名必须大写
• 组件方法必须 return

Function 组件

function HolleWorld(props) {
  return <h1>Holle World： {props.name}</h1>;
}

Class 组件

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>Holle World {this.props.name}</h1>;
  }
}

export default App;

函数组件和类组件的区别：有无 state 属性和生命周期。

React 中的样式

const itemStyle = {
  border: '1px dashed #ddd'
};

function App(props) {
  return <div style={styles.itemStyle}>js对象的形式</div>;
}

react 绑定事件

import React from 'react';

class BindEvent extends React.Component {
  constructor(params) {
    super();
    this.state = {
      msg: '哈哈',
      name: 'LiMing',
      color:
        '#' +
        Math.floor(Math.random() * 0xffffff)
          .toString(16)
          .padEnd(6, '0')
    };
  }
  render(props) {
    return (
      <div>
        <button onClick={() => this.myclickHandler(this.state.color)}>按钮</button>
        <h3>{this.state.msg}</h3>
        <input
          type='text'
          value={this.state.msg}
          onChange={e => this.txtChange(e)}
        />
      </div>
    );
  }
  txtChange = e => {
    this.setState({
      msg: e.target.value // this.refs.txt.value
    });
  };
  myclickHandler = color => {
    this.setState({
      msg: color
    });
  };
}

export default BindEvent;

React 生命周期函数

• 生命周期

React 事件绑定 this

import React from 'react';

class BindThis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: '这是 BindThis组件中的 msg 消息'
    };

    this.changeMsg2Copy = this.changeMsg2.bind(this, '参数one', '参数two');
  }
  render() {
    return (
      <div>
        <h1>这是 BindThis 组件 </h1>
        {/* 方式 ① */}
        {/* bind 修改函数内部的 this 指向，指向 bind 参数列表中的第一个参数 */}
        <input
          type='button'
          value='react 中绑定 this 传递参数的3中方式1'
          onClick={this.changeMsg1.bind(this, '参数1', '参数2')}
        />
        <hr />
        {/* 方式 ② */}
        <input
          type='button'
          value='react 中绑定 this 传递参数的3中方式2'
          onClick={this.changeMsg2Copy}
        />
        <hr />
        {/* 方式 ③ */}
        <input
          type='button'
          value='react 中绑定 this 传递参数的3中方式3'
          onClick={() => this.changeMsg3('参数1111', '参数2222')}
        />

        <h2>{this.state.msg}</h2>
      </div>
    );
  }

  changeMsg1(arg1, arg2) {
    console.log(this); // 指向实例
    this.setState({
      msg: '变成新值了' + arg1 + arg2
    });
  }

  changeMsg2(arg1, arg2) {
    console.log(this); // undefined
    this.setState({
      msg: '变成新值了' + arg1 + arg2
    });
  }

  changeMsg3 = (arg1, arg2) => {
    console.log(this); // 指向实例
    this.setState({
      msg: '变成新值了' + arg1 + arg2
    });
  };
}

export default BindThis;

Context 传值

import React from 'react';
import ReactTypes from 'prop-types';

class Father extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  // 1. 在父组件定义固定的名字 getChildContext 函数
  // 内部必须返回一个对象，这个对象就是要共给子孙组件的数据
  getChildContext() {
    return {
      color: this.state.color
    };
  }

  // 2. 使用 属性校验，规定一下传递给子组件的数据类型,固定名字 childContextTypes
  static childContextTypes = {
    color: ReactTypes.string
  };

  change = () => this.setState({ color: 'blue' });

  render() {
    return (
      <div style={{ padding: 20, border: '1px solid blue' }}>
        <button onClick={this.change.bind(this)}>改变父组件中的颜色</button>
        <hr />
        <Son></Son>
      </div>
    );
  }
}

class Son extends React.Component {
  constructor(props) {
    super();
  }

  // 3. 先来个属性校验，校验父组件传递过来的参数类型
  static contextTypes = {
    color: ReactTypes.string // 这里，子组件一定要校验一下父组件传递过来的 context 的数据类型
  };

  render() {
    return (
      <div style={{ padding: 20, border: '1px solid green' }}>
        <h3 style={{ color: this.context.color }}>这是Son组件 --- {this.context.color}</h3>
      </div>
    );
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
    console.log('UNSAFE_componentWillReceiveProps 函数');
  }
}

export default Father;